import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Table, Button, Modal, Divider, message } from 'antd';
import { Redirect } from 'react-router-dom';
import UserModal from '../../components/UserModal';
import './index.scss';

class User extends Component {

  constructor(props) {
    super(props);
    this.state = {
      columns: [{
        title: '用户ID',
        dataIndex: 'id',
        key: 'id',
      }, {
        title: '用户名',
        dataIndex: 'userName',
        key: 'userName',
      }, {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
      }, {
        title: '操作',
        dataIndex: '',
        key: 'x',
        render: (text, record) => (
          <span>
            <Button onClick={this.showEditUser}>编辑 - {record.userName}信息</Button>
            <Divider type='vertical' />
            <Button onClick={this.props.deleteUser.bind(this, record.id)}>删除</Button>
          </span>
        )
      }],
      addUserVisible: false,
      editUserVisible: false,
      confirmLoading: false,
      userId: '',
      userName: '',
      password: '',
    }

    this.showAddUser = this.showAddUser.bind(this);
    this.showEditUser = this.showEditUser.bind(this);
    this.closeAddUser = this.closeAddUser.bind(this);
    this.closeEditUser = this.closeEditUser.bind(this);
    this.handleChangeUserName = this.handleChangeUserName.bind(this);
    this.handleChangePassword = this.handleChangePassword.bind(this);
  }
  
  render() {
    const { dataSource, loginStatus, editUser, addUser } = this.props;
    if(loginStatus) {
      return (
        <div className='user-list-wrapper'>
          <div className='user-list-title'>
            <h1>用户列表</h1>
            <Button type="primary" onClick={this.showAddUser}>添加用户</Button>
          </div>
          <div className='user-list-info'>
            <Table columns={this.state.columns} dataSource={dataSource.toJS()} />
          </div>
          {/* 新建用户 */}
          <Modal
            title="新增用户"
            visible={this.state.addUserVisible}
            onOk={addUser.bind(this)}
            onCancel={this.closeAddUser}
            confirmLoading={this.state.confirmLoading}
            okText="添加"
            cancelText="取消"
          >
            <UserModal userName={this.state.userName} password={this.state.password} handleChangeUserName={this.handleChangeUserName} handleChangePassword={this.handleChangePassword} />
          </Modal>
          {/* 编辑用户 */}
          <Modal
            title="编辑用户"
            visible={this.state.editUserVisible}
            onOk={editUser.bind(this)}
            onCancel={this.closeEditUser}
            confirmLoading={this.state.confirmLoading}
            okText="修改"
            cancelText="取消"
          >
            <UserModal userName={this.state.userName} password={this.state.password} handleChangeUserName={this.handleChangeUserName} handleChangePassword={this.handleChangePassword} />
          </Modal>
        </div>
      );
    } else {
      return <Redirect to='/login' />;
    }
  }

  showAddUser() {
    this.setState({
      addUserVisible: true
    });
  }

  showEditUser(id) {
    this.setState({
      editUserVisible: true
    });
  }

  closeAddUser() {
    this.setState({
      addUserVisible: false
    });
  }

  closeEditUser() {
    this.setState({
      editUserVisible: false
    });
  }

  handleChangeUserName(e) {
    this.setState({
      userName: e.target.value
    });
  }

  handleChangePassword(e) {
    this.setState({
      password: e.target.value
    });
  }

}

const mapState = (state) => ({
  loginStatus: state.getIn(['login', 'loginStatus']),
  dataSource: state.getIn(['user', 'dataSource'])
});

const mapDispatch = (dispatch) => ({
  getUserList() {

  },

  deleteUser(id) {

  },

  editUser() {
    this.setState({
      confirmLoading: true
    });
    setTimeout(() => {
      this.setState({
        editUserVisible: false,
        confirmLoading: false,
        userName: '',
        password: ''
      });
      message.success('编辑成功');
    }, 2000);
  },

  addUser() {
    this.setState({
      confirmLoading: true
    });
    setTimeout(() => {
      this.setState({
        addUserVisible: false,
        confirmLoading: false,
        userName: '',
        password: ''
      });
      message.success('添加成功');
    }, 2000);
  }

});

export default connect(mapState, mapDispatch)(User);